<template>
  <el-row>
    <el-col :span="24">
      <el-select
        :model-value="store.state.selectedTemplate"
        @change="selectTemplate"
        placeholder="请选择模板"
        style="width: 100%"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <iframe class="iframe" :src="store.state.templateUrl"></iframe>
    </el-col>
    <el-col :span="24">
      <p class="text">表单缩略图</p>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "vuex";
import { Store } from "../store";

const store = useStore<Store>();
const options = ref([
  { label: "模板1", value: "1" },
  { label: "模板2", value: "2" },
]);
function selectTemplate(value: string) {
  store.commit("selectedTemplate", value);
}
</script>
<style lang="css">
.iframe {
  width: 100%;
  height: 350px;
  border: none;
}
.el-row {
  margin-bottom: 20px;
}
.text {
  text-align: center;
}
</style>
